<template>
  <div class="nav">
    <a-row type="flex" justify="space-around" align="middle">
      <a-col :xs="12" :sm="12" :md="6" :lg="8" :xl="10" :order="1">
        <div class="logo">
          <router-link to="/home">
            <a-icon type="youtube" />&emsp;电影推荐系统（海外版）
          </router-link>
        </div>
      </a-col>
      <a-col :xs="2" :sm="2" :md="6" :lg="10" :xl="10" :order="2">
        <a-menu mode="horizontal">
          <a-menu-item>
            <router-link to="/movies">
              <a-icon type="edit" />电影
            </router-link>
          </a-menu-item>
          <!-- <a-menu-item>
            <router-link to="/categories">
              <a-icon type="folder-open" />分类
            </router-link>
          </a-menu-item>-->
          <a-menu-item>
            <router-link to="/archives">
              <a-icon type="tags" />归档
            </router-link>
          </a-menu-item>

          <a-menu-item v-if="!login">
            <a @click="updateVisible">
              <a-icon type="login" />登录
            </a>
          </a-menu-item>
          <a-menu-item v-if="!login">
            <a @click="updateVisible2">
              <a-icon type="user-add" />注册
            </a>
          </a-menu-item>

          <a-menu-item v-if="login">
            <!-- <a @click="updateVisible1">
              <a-icon type="user" />
            </a>-->
            <router-link to="/about">
              <a-icon type="like" />个人信息
            </router-link>
          </a-menu-item>
          <a-menu-item v-if="login">
            <a @click="Logout">
              <a-icon type="close-circle" />退出
            </a>
          </a-menu-item>
        </a-menu>
      </a-col>
    </a-row>
    <login :visible="visible" v-on:updateCancel="updateCancel" v-on:updateLogin="Login"></login>
    <register :visible="visible2" v-on:updateCancel="updateCancel2" v-on:updateLogin="Login"></register>
  </div>
</template>
<script>
import login from "../user/login";
import register from "../user/register";
export default {
  components: {
    login,
    register,
  },
  data() {
    return {
      current: ["mail"],
      login: false,
      visible: false,
      visible1: false,
      visible2: false,
    };
  },
  created() {
    this.login = localStorage.getItem("username") != null;
  },
  methods: {
    updateVisible() {
      this.visible = true;
    },
    Login() {
      this.login = true;
    },
    Logout() {
      this.login = false;
      localStorage.removeItem("username");
      this.$message.info("成功退出登录");
      this.$router.push("/home");
    },
    updateVisible1() {
      this.visible1 = true;
    },
    updateVisible2() {
      this.visible2 = true;
    },
    updateCancel() {
      this.visible = false;
    },
    updateCancel1() {
      this.visible1 = false;
    },
    updateCancel2() {
      this.visible2 = false;
    },
  },
};
</script>

<style scoped>
.nav {
  text-align: left;
  color: #1890ff;
  /* background-color: #f4f4f4; */
  /* background-color: hsla(0, 0%, 100%, 0.7); */
}

.logo {
  display: inline-block;
  font-size: 1.2rem;
}
.ant-menu-item {
  margin: 0 10px;
  font-size: 16px;
}
.ant-menu {
  background: none;
  /* background-color: hsla(0, 0%, 100%, 0.7); */
}
/* .nav {
  font-size: 16px !important;
} */
</style>
